Public
Edited
Oct 15, 2023
Paused
4 stars
data = (await require('vega-datasets@1'))['gapminder.json']()
md`${data.length} rows, ${Object.keys(data[0]).length} columns!`
printTable(data.slice(0, 10))
data2000 = data.filter(d => d.year === 2000)
printTable(data2000.slice(0, 10))
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldO('cluster')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility').scale({zero: false}),
vl.y().fieldQ('life_expect').scale({zero: false})
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]})
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5)
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.shape().fieldN('cluster')
)
.render()
cars = (await require('vega-datasets@1'))['cars.json']() // load and parse cars data
printTable(cars.slice(0, 5)) // display the first five rows
// Code here
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country'),
vl.order().fieldQ('pop').sort('descending')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.order().fieldQ('pop').sort('descending'),
vl.tooltip(['country', 'fertility', 'life_expect'])
)
.render()
// Code here
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country'),
vl.order().fieldQ('pop').sort('descending'),
vl.column().fieldN('cluster')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]})
.legend({orient: 'bottom', titleOrient: 'left'}),
vl.color().fieldN('cluster')
.legend(null),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country'),
vl.order().fieldQ('pop').sort('descending'),
vl.column().fieldN('cluster')
)
.width(130)
.height(130)
.render()
// Code here
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster'),
vl.shape().fieldN('cluster')
)
.render()
vl.markPoint({filled: true, size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster'),
vl.shape().fieldN('cluster')
)
.render()
vl.markCircle({size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
vl.markSquare({size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
vl.markTick()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldN('country'),
vl.y().fieldQ('pop')
)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldN('cluster'),
vl.y().fieldQ('pop'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().min('life_expect'),
vl.x2().max('life_expect'),
vl.y().fieldN('cluster')
)
.render()
// Code here
vl.markLine()
.data(data)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.width(400)
.render()
vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.data(data)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.width(400)
.render()
vl.markLine({opacity: 0.5})
.data(data.filter(d => d.year === 1955 || d.year === 2005))
.encode(
vl.x().fieldO('year').scale({rangeStep: 50}),
vl.y().fieldQ('pop'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.render()
// Code here
dataUS = data.filter(d => d.country === 'United States')
vl.markArea()
.data(dataUS)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility')
)
.render()
vl.markArea({interpolate: 'monotone'})
.data(dataUS)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility')
)
.render()
dataNA = data.filter(d => {
return d.country === 'United States'
|| d.country === 'Canada'
|| d.country === 'Mexico';
})
vl.markArea()
.data(dataNA)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('pop'),
vl.color().fieldN('country')
)
.render()
vl.markArea()
.data(dataNA)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('pop').stack('center'),
vl.color().fieldN('country')
)
.render()
vl.markArea({opacity: 0.5})
.data(dataNA)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('pop').stack(null),
vl.color().fieldN('country')
)
.render()
vl.markArea()
.data(dataNA)
.encode(
vl.x().fieldO('year').scale({rangeStep: 40}),
vl.y().min('fertility'),
vl.y2().max('fertility')
)
.render();
vl.markArea()
.data(dataNA)
.encode(
vl.y().fieldO('year').scale({rangeStep: 40}),
vl.x().min('fertility'),
vl.x2().max('fertility')
)
.render();
// Code here
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.